<template>
	<view class="logo_main">
		<!-- #ifndef H5 || APP-PLUS || MP-ALIPAY -->
		<view class="navbar">
			<view class="fixed">
				<!-- 状态栏 时间 电量 信号 -->
				<view :style="{height: navbarStatusHeight+'px'}"></view>
				<!-- 胶囊按钮左侧位置 -->
				<view class="navbar-content" :style="{width:navBarWidth+'px',height:navBarHeight+'px'}">
					<view class="back_btn" @click="goLogin">
						<uni-icons type="back" size="50rpx" class="back_icon"></uni-icons>
					</view>
				</view>
			</view>
			<!-- 设置占位 将微信小程序的状态栏高度预留出来 -->
			<view :style="{height:navbarStatusHeight+navBarHeight+'px' }"></view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 || APP-PLUS || MP-ALIPAY -->
		<view class="back_btn" @click="goLogin">
			<uni-icons type="back" size="50rpx" class="back_icon"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="content_phone">
			<view class="title_tip">
				绑定手机号
			</view>
			<view class="title_b">
				绑定手机号才可登录
			</view>
		</view>
		<view class="login">
			<uni-forms :modelValue="loginForm">
				<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" maxlength="11" v-model="loginForm.tel"
					placeholder="请输入手机号" />
				<view class="code_re">
					<uni-easyinput type="number" placeholderStyle="font-size:28rpx;" :clearable="false" maxlength="6"
						v-model="loginForm.code" placeholder="请输入验证码" />
					<view class="code_text">
						获取验证码
					</view>
				</view>
			</uni-forms>
		</view>
		<view class="btn">
			<button type="primary" color="#10a9e6" :class="{btn_bg:loginForm.tel&&loginForm.code}" class="btn_sty"
				:disabled="!(loginForm.tel&&loginForm.code)" @click="onLogin">绑定并登录</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const navbarStatusHeight = ref(0)
	const navBarHeight = ref(45)
	const navBarWidth = ref(375)
	const loginForm = ref({
		tel: '', //手机号
		code: "", //验证码
	})
	onMounted(() => {
		const info = uni.getSystemInfoSync()
		navbarStatusHeight.value = info.statusBarHeight
		// 根据微信小程序的右上侧的胶囊样式 设置导航栏内容的高度
		// 条件编译 以下三个不支持胶囊样式
		// #ifndef H5 || APP-PLUS || MP-ALIPAY
		const menuInfo = uni.getMenuButtonBoundingClientRect()
		// 导航栏内容的高度 = (胶囊底部的高度 - 状态栏的高度) + (胶囊顶部的高度 - 状态栏的高度)
		navBarHeight.value = (menuInfo.bottom - info.statusBarHeight) + (menuInfo.top - info.statusBarHeight)
		// 导航栏内容的宽度  除开胶囊按钮左侧的内容宽度
		navBarWidth.value = menuInfo.left
		// #endif
	})
	const goLogin = () => {
		uni.navigateBack(1)
	}
	const onLogin = () => {
		uni.redirectTo({
			url: '/pages_network/home/home'
		})
	}
</script>

<style lang="scss" scoped>
	.navbar {
		.fixed {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;
			width: 100%;

			.navbar-content {
				display: flex;
				align-items: center;

				.back_btn {
					display: flex;
					align-items: center;
					font-size: 32rpx;
					padding-left: 10rpx;

					.back_icon {
						width: 50rpx;
					}
				}
			}
		}
	}

	.logo_main {
		background-image: url('@/static/network/login/bg_login.png');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: top;
		height: 100vh;
		overflow-y: auto;

		// #ifdef H5 || APP-PLUS || MP-ALIPAY
		.back_btn {
			padding: 40rpx 20rpx;
			display: flex;
			align-items: center;
			font-size: 32rpx;

			.back_icon {
				width: 50rpx;
			}
		}

		// #endif
		.content_phone {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;

			.title_tip {
				font-size: 48rpx;
			}

			.title_b {
				color: #999;
				font-size: 28rpx;
			}
		}

		.login {
			padding: 20rpx 60rpx;
			box-sizing: border-box;

			:deep(.is-input-border) {
				// border-radius: 80rpx !important;
				// background-color: rgba(243, 244, 248, 1) !important;
				// padding: 10rpx;
				// margin: 40rpx 0;
				// border: none;
				// height: 90rpx;

				background-color: transparent !important;
				margin: 20rpx 0;
				border: none;
				border-bottom: 1rpx solid #ccc;
				border-radius: 0;
				height: 90rpx;
			}

			.code_re {
				position: relative;

				.code_text {
					height: 30rpx;
					font-size: 28rpx;
					line-height: 30rpx;
					color: #007cff;
					position: absolute;
					top: calc(50% - 15rpx);
					right: 30rpx;
				}
			}
		}

		.btn {
			padding: 20rpx 60rpx;

			.btn_sty {
				border-radius: 80rpx;
				background-color: #007cff46;
				line-height: 90rpx;
				height: 90rpx;
				font-size: 32rpx
			}

			:deep(button::after) {
				border: none !important;
			}

			.btn_bg {
				background-color: #007cff;
			}
		}
	}
</style>